import { message, Table } from 'antd';

import { pageCoursesUsingPost } from '@/services/student-management-system/kechengmokuai';
import moment from 'moment';
import React, { useEffect, useState } from 'react';

const CourseInfo: React.FC = () => {
  const initSearchParam = {
    current: 1,
    pageSize: 6,
    sortField: 'createTime',
    sortOrder: 'desc',
  };

  const [queryParam, setQueryParam] = useState<API.QueryCourseDTO>({ ...initSearchParam });
  const [dataSource, setDataSource] = useState<API.CourseVO[]>([]);
  const [total, setTotal] = useState<number>(0);

  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '课程名称', dataIndex: 'courseName', key: 'courseName' },
    { title: '学分', dataIndex: 'credit', key: 'credit' },
    { title: '学时', dataIndex: 'hours', key: 'hours' },
    { title: '授课教师', dataIndex: 'teacherName', key: 'teacherName' },
    { title: '描述', dataIndex: 'description', key: 'description' },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: (text: Date) => (
        <>
          <div>{moment(text).format('YYYY-MM-DD')}</div>
          <div>{moment(text).format('HH:mm:ss')}</div>
        </>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      render: (text: Date) => (
        <>
          <div>{moment(text).format('YYYY-MM-DD')}</div>
          <div>{moment(text).format('HH:mm:ss')}</div>
        </>
      ),
    },
  ];

  const getCourseList = async () => {
    const res = await pageCoursesUsingPost({ ...queryParam });
    if (res.code === 200) {
      message.success('获取数据成功');
      setDataSource(res.data?.records ?? []);
      setTotal(res.data?.total ?? 0);
    } else {
      message.error('获取数据失败：' + res.msg);
    }
  };

  useEffect(() => {
    getCourseList();
  }, [queryParam]);

  return (
    <div className="ManageScore">
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          total,
          current: queryParam.current,
          pageSize: queryParam.pageSize,
          onChange: (current, pageSize) => setQueryParam({ ...queryParam, current, pageSize }),
        }}
      />
    </div>
  );
};

export default CourseInfo;
